﻿@page
@{
    ViewBag.Title = "Table";
}
<div class="row">
    <div class="col-md-6 col-md-offset-3">
        <h2>Regular</h2>
        <table class="table table-hover">
            <thead>
                <tr>
                    <th>First Name</th>
                    <th>Last Name</th>
                </tr>
            </thead>
            <tfoot class="text-muted">
                <tr>
                    <td>User count:</td>
                    <td>4</td>
                </tr>
            </tfoot>
            <tbody>
                <tr onclick="goTo();">
                    <td>John</td>
                    <td>Smith</td>
                </tr>
                <tr onclick="goTo();">
                    <td>Jane</td>
                    <td>Smith</td>
                </tr>
                <tr onclick="goTo();">
                    <td>Jack</td>
                    <td>Jameson</td>
                </tr>
                <tr onclick="goTo();">
                    <td>Sam</td>
                    <td>Jackson</td>
                </tr>
            </tbody>
        </table>

        <h2>Dynamic</h2>
        <div>
            <button class="btn btn-default" onclick="addUsa();">Add USA</button>
            <button class="btn btn-default" onclick="addChina();">Add China (with delay)</button>
            <button class="btn btn-default" onclick="clearChina();">Clear China</button>
        </div>
        <table id="country-table" class="table table-hover">
            <thead>
                <tr>
                    <th>Country</th>
                    <th>Capital</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>England</td>
                    <td>London</td>
                </tr>
                <tr>
                    <td>France</td>
                    <td>Paris</td>
                </tr>
                <tr>
                    <td>Germany</td>
                    <td>Berlin</td>
                </tr>
            </tbody>
        </table>

        <h2>Single Item</h2>
        <table id="single-item-table" class="table table-hover">
            <thead>
                <tr>
                    <th>Key</th>
                    <th>Value</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>Some item</td>
                    <td>Some value</td>
                </tr>
            </tbody>
        </table>

        <h2>Duplicate Items</h2>
        <table id="duplicate-items-table" class="table table-hover">
            <thead>
                <tr>
                    <th>Key</th>
                    <th>Value</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>Some item</td>
                    <td>Some value</td>
                </tr>
                <tr>
                    <td>Some item</td>
                    <td>Some value</td>
                </tr>
            </tbody>
        </table>

        <h2>Empty</h2>
        <table class="table table-hover">
            <thead>
                <tr>
                    <th>Name</th>
                    <th>Description</th>
                </tr>
            </thead>
            <tbody></tbody>
        </table>

        <h2>Inside Another Table</h2>
        <table class="table">
            <thead>
                <tr>
                    <th>Root</th>
                    <th>Table</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>
                        <table id="inside-another-table" class="table">
                            <thead>
                                <tr>
                                    <th>Key</th>
                                    <th>Value</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>A</td>
                                    <td>1</td>
                                </tr>
                            </tbody>
                        </table>
                    </td>
                </tr>
            </tbody>
        </table>

        <h2>Cars</h2>
        <table id="cars" class="table table-hover">
            <thead>
                <tr>
                    <th data-field="make">Car Make</th>
                    <th data-field="model">Car Model</th>
                    <th data-field="year">Year</th>
                    <th data-field="category">Category</th>
                    <th data-field="airconditioner">Air Conditioner</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td data-id="1">Volvo</td>
                    <td>S60</td>
                    <td>2010</td>
                    <td>Saloon</td>
                    <td>Yes</td>
                </tr>
                <tr>
                    <td data-id="2">Audi</td>
                    <td>A4</td>
                    <td>2002</td>
                    <td>Saloon</td>
                    <td>Yes</td>
                </tr>
                <tr>
                    <td data-id="3">BMW</td>
                    <td>535d</td>
                    <td>2006</td>
                    <td>Saloon</td>
                    <td>Yes</td>
                </tr>
                <tr>
                    <td data-id="4">BMW</td>
                    <td>320d</td>
                    <td>2006</td>
                    <td>Saloon</td>
                    <td>No</td>
                </tr>
                <tr>
                    <td>VW</td>
                    <td>Passat</td>
                    <td>2007</td>
                    <td>Saloon</td>
                    <td>No</td>
                </tr>
                <tr>
                    <td>VW</td>
                    <td>Passat</td>
                    <td>2008</td>
                    <td>Saloon</td>
                    <td>Yes</td>
                </tr>
                <tr>
                    <td>Peugeot</td>
                    <td>407</td>
                    <td>2006</td>
                    <td>Saloon</td>
                    <td>Yes</td>
                </tr>
                <tr>
                    <td>Honda</td>
                    <td>Accord</td>
                    <td>2008</td>
                    <td>Saloon</td>
                    <td>No</td>
                </tr>
                <tr>
                    <td>Alfa Romeo</td>
                    <td>159</td>
                    <td>2008</td>
                    <td>Saloon</td>
                    <td>No</td>
                </tr>
                <tr>
                    <td>Nissan</td>
                    <td>Almera</td>
                    <td>2001</td>
                    <td>Saloon</td>
                    <td>Yes</td>
                </tr>
                <tr>
                    <td>Toyota</td>
                    <td>Avensis</td>
                    <td>2006</td>
                    <td>Saloon</td>
                    <td>No</td>
                </tr>
                <tr>
                    <td>Toyota</td>
                    <td>Avensis</td>
                    <td>2008</td>
                    <td>Saloon</td>
                    <td>Yes</td>
                </tr>
                <tr>
                    <td>Audi</td>
                    <td>Q7</td>
                    <td>2007</td>
                    <td>SUV</td>
                    <td>Yes</td>
                </tr>
                <tr>
                    <td>Hyundai</td>
                    <td>Santa Fe</td>
                    <td>2012</td>
                    <td>SUV</td>
                    <td>Yes</td>
                </tr>
                <tr>
                    <td>Hyundai</td>
                    <td>Santa Fe</td>
                    <td>2013</td>
                    <td>SUV</td>
                    <td>Yes</td>
                </tr>
                <tr>
                    <td>Nissan</td>
                    <td>Qashqai</td>
                    <td>2007</td>
                    <td>SUV</td>
                    <td>Yes</td>
                </tr>
                <tr>
                    <td>Mercedes</td>
                    <td>B Class</td>
                    <td>2007</td>
                    <td>Hatchback</td>
                    <td>Yes</td>
                </tr>
                <tr>
                    <td>Lancia</td>
                    <td>Ypsilon</td>
                    <td>2006</td>
                    <td>Hatchback</td>
                    <td>Yes</td>
                </tr>
            </tbody>
        </table>

        <h2>Ordered</h2>
        <table id="ordered-table" class="table table-hover">
            <thead>
                <tr>
                    <th>Letter</th>
                    <th>Number</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>A</td>
                    <td>3</td>
                </tr>
                <tr>
                    <td>B</td>
                    <td>2</td>
                </tr>
                <tr>
                    <td>C</td>
                    <td>1</td>
                </tr>
            </tbody>
        </table>
    </div>
</div>

<script>
    function goTo() {
        window.document.location = '/goto1';
    }

    function addUsa() {
        $('#country-table > tbody:last-child').append('<tr><td>USA</td><td>Washington</td></tr>');
    }

    function addChina() {
        setTimeout(function () {
            $('#country-table > tbody:last-child').append('<tr class="china-row"><td>China</td><td>Beijing</td></tr>');
        }, 2000);
    }

    function clearChina() {
        $('#country-table tr.china-row').remove();
    }
</script>
